<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="__LAYUI__/layui/css/layui.css" media="all" rel="stylesheet">
		<link href="__LAYUI__/adminui/dist/css/admin.css" media="all" rel="stylesheet">
	</head>
	{include file="info" /}
	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">

						<div class="layui-card-body">
							<blockquote class="layui-elem-quote">
								<em style="color:#5f5f5f">
									<span>注意：</span>1>暂定三层目录
									<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									2>子级跟随父级（状态、删除）
								</em>
							</blockquote>
							<script type="text/html" id="topDemo">
								<div class="layui-btn-container">
									<button class="layui-btn layui-btn-sm {if MyAuto('myadmin','menu','edit')==false}layui-hide{/if}"
									 lay-event="add"> 添加 </button>
									<button class="layui-btn layui-btn-sm layui-bg-blue" lay-event="reload"> 重载 </button>
								</div>
							</script>
							<script type="text/html" id="TypeTpl">
							{{# if(d.type==1){ }}
								<span style="color:#16baaa">左侧展示</span>
								{{# } else if(d.type==2){ }}
									<span style="color:#ed1941">操作节点</span>
									{{# } }}
							</script>
							<script type="text/html" id="StatusTpl">
								<input type="checkbox" name="status" value="{{= d.id }}" title=启用|禁用 lay-skin="switch" lay-filter="table-status"
								 {{= d.status == 1 ? "checked" : "" }}>
							</script>
							<script type="text/html" id="LockTpl">
								{{# if(d.lock==1){ }}
									<span style="color:#ed1941">锁定</span>
								{{# } else if(d.lock==2){ }}
									<span style="color:#1e9fff">开放</span>
								{{# } }}
							</script>
							<table class="layui-hide" id="TableId" lay-filter="TableTer" lay-skin="row"></table>
							<script type="text/html" id="rightDemo">
								<button class="layui-btn layui-btn-xs {if MyAuto('myadmin','menu','edit')==false}layui-hide{/if}"
								 lay-event="edit"> 编辑 </button>
								<button
								 class="layui-btn layui-btn-danger layui-btn-xs {if MyAuto('myadmin','menu','del')==false}layui-hide{/if}"
								 lay-event="del"> 删除 </button>
							</script>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>
</html>
<script>
	layui.use(["layer", "jquery", "form", "table", "treeTable"], function() {
		var layer = layui.layer;
		var $ = layui.jquery;
		var form = layui.form;
		var table = layui.table;
		var treeTable = layui.treeTable;
		var inst = treeTable.render({
			elem: "#TableId",
			url: "{:url('menu/index')}",
			toolbar: "#topDemo",
			method: "post",
			id: "Tableload",
			even: true,
			// treeTable 特定属性集
			tree: {
				customName: {
					name: "title",
				},
				view: {
					showIcon: false,
				}
			},
			cols: [
				[{
					field: "orders",
					title: "排序",
					edit: "text",
					width: 60,
					align: "center",
				}, {
					field: "id",
					title: "ID",
					hide: true,
					width: 80,
					align: "center"
				}, {
					field: "title",
					title: "名称",
					align: "center"
				}, {
					field: "module",
					title: "模块",
					width: 100,
					align: "center"
				}, {
					field: "controller",
					title: "控制器",
					width: 100,
					align: "center"
				}, {
					field: "function",
					title: "方法",
					width: 100,
					align: "center"
				}, {
					field: "type",
					title: "类别",
					templet: "#TypeTpl",
					width: 100,
					align: "center"
				}, {
					field: "status",
					title: "状态",
					templet: "#StatusTpl",
					width: 100,
					align: "center"
				}, {
					field: "icon",
					title: "图标",
					minWidth: 100,
					align: "center"
				}, {
					field: "lock",
					title: "性质",
					hide: true,
					templet: "#LockTpl",
					width: 100,
					align: "center"
				}, {
					field: "create_time",
					title: "创建时间",
					width: 180,
					align: "center"
				}, {
					fixed: "right",
					title: "操作",
					templet: "#rightDemo",
					width: 150,
					align: "center"
				}]
			],
			page: false,
			/* done: function() {
				treeTable.expandNode("Tableload",{
					index: 0, // 第一行
					expandFlag: true // 展开
				});
			} */
		});
		// 监听表格 - 上边操作
		table.on("toolbar(TableTer)", function(obj) {
			if (obj.event === "add") { // 监听添加操作
				layer.open({
					title: "添加信息",
					type: 2,
					offset: "r",
					anim: "slideLeft", // 从右往左
					area: ["50%", "100%"],
					shade: 0.5,
					shadeClose: false,
					move: false,
					content: "{:url('menu/edit')}",
					end: function() {
						reloadData();
					}
				});
			} else
			if (obj.event === "reload") {
				reloadData();
			}
		});
		// 监听表格 - 右边操作
		table.on("tool(TableTer)", function(obj) {
			var data = obj.data;
			if (obj.event === "edit") {
				layer.open({
					title: "编辑信息",
					type: 2,
					offset: "r",
					anim: "slideLeft", // 从右往左
					area: ["50%", "100%"],
					shade: 0.5,
					shadeClose: false,
					move: false,
					content: "{:url('menu/edit')}?id=" + data.id,
					end: function() {
						reloadData();
					}
				});
			} else
			if (obj.event === "del") { // 监听添加操作
				var layMsg = top.layer.msg("确定要删除?", {
					icon: 3,
					time: 20 * 1000,
					shade: 0.5,
					btnAlign: "c",
					btn: ["确定", "想想"],
					yes: function(index, layero) {
						$.ajax({
							url: "{:url('menu/del')}",
							data: {
								id: data.id
							},
							type: "post",
							success: function(res) {
								if (res.code == 0) {
									top.notify.success(res.msg, "topRight");
									setTimeout(function() {
										parent.layer.close(layMsg);
										reloadData();
									}, 1000)
								} else {
									top.notify.error(res.msg, "topRight");
									parent.layer.close(layMsg);
								}
							}
						})
						return false;
					}
				})
			}
		});
		// 监听表格单元格编辑事件
		table.on("edit(TableTer)", function(obj) {
			var value = obj.value; //得到修改后的值
			var data = obj.data //得到所在行所有键值
			$.ajax({
				url: "{:url('menu/orders')}",
				data: {
					orders: value,
					id: data.id
				},
				type: "post",
				success: function(res) {
					if (res.code == 0) {
						top.notify.success(res.msg, "topRight");
					} else {
						top.notify.error(res.msg, "topRight");
					}
					setTimeout(function() {
						reloadData();
					}, 1000)
				}
			})
			return false;
		});
		// 监听状态 - 开关操作
		form.on('switch(table-status)', function(obj) {
			if (obj.elem.checked == false) {
				var status = 2;
			} else {
				var status = 1;
			}
			$.ajax({
				url: "{:url('menu/status')}",
				type: "post",
				data: {
					id: this.value,
					status: status
				},
				success: function(res) {
					if (res.code == 0) {
						top.notify.success(res.msg, "topRight");
					} else {
						top.notify.error(res.msg, "topRight");
					}
					setTimeout(function() {
						reloadData();
					}, 1000)
				}
			})
			return false;
		});
		// 无条件重载，无分页
		function reloadData() {
			table.reloadData("Tableload",true);
		};
	});
</script>